<template>
  <div>
    <div class='title'>达成率</div>
    <div ref='charDom' style='width:100%;height:300px;'></div>
    <div class='bottomInfo'>
      <span class='info1'>预计达成：</span>
      <span class='info2'>{{ aps }}元</span>
      <span class='info3'>实际达成：</span>
      <span class='info4'>{{ income }}元</span>
    </div>
  </div>
</template>

<script>
const echarts = require('echarts')

export default {
  props: ['dataList'],
  components: {},
  data(){
    return {
      currentNav: '',
      myChart: null,
      aps: 0,
      income: 0,
      guegeData: [
        {value: 0, name: '良好'}
      ]
    }
  },
  watch: {
    dataList (val) {
      console.log(val)
      this.getOption()
    }
  },
  mounted(){
    this.myChart = echarts.init(this.$refs.charDom)
    console.log(this.dataList)
    this.getOption()
  },
  methods: {
    getData () {
      if (!this.dataList.aps || !this.dataList.aps.length || !this.dataList.income.length) return
      let tempAps = 0
      let tempIncome = 0
      for (let i of this.dataList.aps) {
        tempAps += i
      }
      for (let o of this.dataList.income) {
        tempIncome += o
      }
      this.aps = this.util.twoFixed(tempAps)
      this.income = this.util.twoFixed(tempIncome)
      let percent = this.aps ? this.income / this.aps : 0
      this.guegeData[0].value = percent * 100
      if (percent < 1 ) {
        this.guegeData[0].name = '不达标'
        return
      }
      if (percent > 1 && percent < 2) {
        this.guegeData[0].name = '良好'
        return
      }
      if ( percent > 2) {
        this.guegeData[0].name = '优秀'
      }
    },
    getOption () {
      this.getData()
      this.myChart.setOption({
        tooltip: {
            show: false,
        },
        series: [{
            name: '完成度',
            type: 'gauge',
            radius: '80%',
            axisLabel: {
                show: true,
                distance: 14,
                color: '#fff',
                fontSize: 12
            },
            progress: {
                show: true,
                width: 8,
                itemStyle: {
                    color: '#30ccfb'
                }
            },
            axisLine: {
                lineStyle: {
                    width: 8,
                    color: [[1, '#0c2f74']]
                }
            },
            axisTick: {
                show: true,
                distance: 10,
                length: 6,
                lineStyle: {
                    width: 3,
                    color: '#30ccfb',
                    cap: 'round'
                }
            },
            splitLine: {
                show: true,
                distance: 10,
                length: 12,
                lineStyle: {
                    width: 3,
                    color: '#30ccfb',
                    cap: 'round'
                }
            },
            pointer: {
                show: true,
                width: 8,
                length: '50%',
                itemStyle: {
                    color: '#30ccfb'
                }
            },
            title: {
                show: true,
                offsetCenter: [0, '72%'],
                fontSize: 16,
                color: '#fff'
            },
            detail: {
                show: true,
                valueAnimation: true,
                fontSize: 16,
                offsetCenter: [0, '50%'],
                formatter: function (value) {
                    return value.toFixed(0) + '%';
                },
                color: '#1bc9ad'
            },
            data: this.guegeData
        }]
      })
    }
  }
}
</script>

<style scoped lang='less'>
.title {
  font-size: 24px;
  font-weight: 400;
  color: #E9F2F9;
  text-align: center;
}

.bottomInfo {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 400;
  .info1 {
    color: #E9F2F9;
  }

  .info2 {
    color: #18B2A3;
  }

  .info3 {
    margin-left: 30px;
    color: #E9F2F9;
  }

  .info4 {
    color: #18B2A3;
  }
}

</style>
